<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 80%;
            margin-top: 10px;
        }

        #search {
            margin: 10px;

        }

        .modal {
            text-align: center;
            z-index: 20;
        }

        ​

        @media screen and (min-width: 768px) {
            .modal:before {
                display: inline-block;
                vertical-align: middle;
                content: " ";
                height: 100%;
            }
        }

        .modal-dialog {
            display: inline-block;
            text-align: left;
            vertical-align: middle;
        }

        .pac-container {
            background-color: #FFF;
            z-index: 20;
            position: fixed;
            display: inline-block;
            float: left;
        }

        .modal-backdrop {
            z-index: 10;
        }

        #right-panel {
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

        #right-panel select, #right-panel input {
            font-size: 15px;
        }

        #right-panel select {
            width: 100%;
        }

        #right-panel i {
            font-size: 12px;
        }

        #right-panel {
            height: 64%;
            float: right;

            width: 390px;
            overflow: auto;
            background-color: #fbfbff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);

            position: absolute;

            left: -1000px;
            top: 18%;

        }

    </style>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        var infoWindow, markers, map = null;
        var autocomplete, strStartPlace, strEndPlace, directionsDisplay, directionsService;

        var arrMarkers = [];

        function initMap() {

            directionsDisplay = new google.maps.DirectionsRenderer;
            directionsService = new google.maps.DirectionsService;


            var uluru = {lat: 23.694307, lng: 120.52561};
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 7,
                center: uluru
            });
            createMarker(map);


            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('route-panel'));


            var startPlace = document.getElementById('startPlace');
            autocomplete = new google.maps.places.Autocomplete(startPlace);
            autocomplete.bindTo('bounds', map);


            autocomplete.addListener('place_changed', function () {
                console.log("here!");
                strStartPlace = autocomplete.getPlace().formatted_address;
                console.log(strStartPlace + ', ' + strEndPlace);


            });

        }


        function btnSearchClick() {
            var keyWords = $("#txtSearch").val();

            getData(function (json1) {
                var findOneAtLeast = false;
                $.each(json1.results.bindings, function (key, data) {

                    if (data.number.value - parseInt(keyWords) == 0) {
                        findOneAtLeast = true;

                        delAllMarkers();

                        var latLng = new google.maps.LatLng(data.lai.value, data.long.value);
                        // Creating a marker and putting it on the map
                        var marker = new google.maps.Marker({
                            position: latLng,
                            map: map,
                            title: data.place.value
                        });
                        arrMarkers.push(marker);

                        var contentString = '<div id="content">' +
                                '<div id="siteNotice">' +
                                '</div>' +
                                '<h1 id="firstHeading" class="firstHeading">' + data.place.value + '</p>' +
                                '</h1>' +
                                '<div id="bodyContent">' +
                                '<p><b>Address:' + data.adress.value + '</p>' +
                                '<p><b>Police:' + data.police.value + '</p>' +
                                '<p><b>Phone:' + data.phone.value + '</p>' +
                                '<p><b>Range:' + data.range.value + '</p>' +
                                '<p><b>Pay:' + data.pay.value + '</p>' +
                                '</div>' + '<button id="btnGoThere" onclick="btnGoThereClick(???)" class="btn btn-success center-block" data-toggle="modal" data-target="#myModal">去这里</button>' +
                                '</div>';


                        // 是否有更好的实现。。
                        contentString = contentString.replace("???", "'" + data.lai.value + "," + data.long.value + "'");

                        marker.addListener('click', function () {
                            if (infoWindow != null) {
                                infoWindow.close();
                            }
                            infoWindow = new google.maps.InfoWindow({
                                content: contentString
                            });


                            infoWindow.open(map, marker);

                        });

                    }


                });

                if (!findOneAtLeast) {
                    createMarker(map);
                }
            });
        }

        function getData(callback) {
            if (markers == null) {
                $.getJSON("query0827.json", function (json1) {
                    markers = json1;
                    callback(json1);
                })
            } else {
//                return markers;
                callback(markers);
            }

        }

        function btnGoThereClick(endPlace) {

            infoWindow.close();
            strEndPlace = endPlace;

            delAllMarkers();

        }

        function btnStartDisplayRoute() {
            calculateAndDisplayRoute(directionsService, directionsDisplay);

            if ($("#right-panel").css("left") != "0px") {
                $("#right-panel").animate({left: "0px"});

            }

        }

        function btnCloseRoute() {
            if ($("#right-panel").css("left") == "0px") {
                $("#right-panel").animate({left: "-1000px"});

            }

            directionsDisplay.setMap(null);

            initMap();
        }

        function delAllMarkers() {
            for (var key in arrMarkers) {
                arrMarkers  [key].setMap(null);
            }
            arrMarkers = [];
        }


        function createMarker(map) {
            delAllMarkers();

            getData(function (json1) {
                $.each(json1.results.bindings, function (key, data) {
                    var latLng = new google.maps.LatLng(data.lai.value, data.long.value);
                    // Creating a marker and putting it on the map
                    var marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                        title: data.place.value
                    });
                    arrMarkers.push(marker);

                    var contentString = '<div id="content">' +
                            '<div id="siteNotice">' +
                            '</div>' +
                            '<h1 id="firstHeading" class="firstHeading">' + data.place.value + '</p>' +
                            '</h1>' +
                            '<div id="bodyContent">' +
                            '<p><b>Address:' + data.adress.value + '</p>' +
                            '<p><b>Police:' + data.police.value + '</p>' +
                            '<p><b>Phone:' + data.phone.value + '</p>' +
                            '<p><b>Range:' + data.range.value + '</p>' +
                            '<p><b>Pay:' + data.pay.value + '</p>' +
                            '</div>' + '<button id="btnGoThere" onclick="btnGoThereClick(???)" class="btn btn-success center-block" data-toggle="modal" data-target="#myModal">去这里</button>' +
                            '</div>';


                    // 是否有更好的实现。。
                    contentString = contentString.replace("???", "'" + data.lai.value + "," + data.long.value + "'");

                    marker.addListener('click', function () {
                        if (infoWindow != null) {
                            infoWindow.close();
                        }
                        infoWindow = new google.maps.InfoWindow({
                            content: contentString
                        });


                        infoWindow.open(map, marker);

                    });
                });
            });
        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
//            var start = document.getElementById('start').value;
//            var end = document.getElementById('end').value;
            directionsService.route({
                origin: strStartPlace,
                destination: strEndPlace,
                travelMode: google.maps.TravelMode.DRIVING
            }, function (response, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    map.setCenter(new google.maps.LatLng(map.getCenter().lat(), map.getCenter().lng() + 10));
                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });
        }
    </script>
</head>
<body>


<div id="search" class="text-center">
    <form class="form-inline">
        <div class="form-group">
            <input type="text" id="txtSearch"  placeholder="输入采矿厂编号"  class="form-control"/>

            <a class="btn btn-default  " id="btnSearch" href="#"for="txtSearch" onclick="btnSearchClick()">
                搜索采矿厂
            </a>

            <a class="btn btn-default  " id="btnShowAlllMarkers" href="#" for="txtSearch" onclick="createMarker(map)">
                显示所有采矿厂
            </a>


            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">请输入起始地点</h4>
                        </div>
                        <div class="modal-body center-block text-center">
                            地点名称：<input id="startPlace" type="text" class="form-control"/>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" onclick="btnStartDisplayRoute()" data-dismiss="modal"
                                    class="btn btn-primary">出发
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </form>


</div>

<div id="map"></div>

<div id="right-panel">
    <div id="route-panel">

    </div>
    <button class="btn btn-danger center-block" onclick="btnCloseRoute()">关闭</button>
</div>


<!-- Google Map-->

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAxt-5Ez38f-lj3Xfzh0fxXqxUvis-Ox30&libraries=places&callback=initMap"></script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>